<script setup lang="ts">
import { ref } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "~icons/ep/refresh";
import { useOrderList } from "./utils/hook";

defineOptions({ name: "SystemOrderList" });

const tableRef = ref();

const {
  filterForm,
  pagination,
  tableData,
  columns,
  loading,
  orderStatusOptions,
  payStatusOptions,
  shipStatusOptions,
  refundStatusOptions,
  handleSearch,
  handleResetFilters,
  handlePageChange,
  handleSizeChange,
  formatCurrency,
  formatStatusTag
} = useOrderList();
</script>

<template>
  <div class="system-order-page">
    <el-form
      :inline="true"
      :model="filterForm"
      class="search-form bg-bg_color w-full pl-4 pt-3 pb-2 overflow-auto"
    >
      <el-form-item label="关键字：" prop="keyword">
        <el-input
          v-model.trim="filterForm.keyword"
          placeholder="订单号 / 备注 / 买卖家"
          clearable
          class="w-[260px]!"
        />
      </el-form-item>
      <el-form-item label="订单状态：" prop="status">
        <el-select
          v-model="filterForm.status"
          placeholder="全部状态"
          clearable
          class="w-[180px]!"
        >
          <el-option
            v-for="item in orderStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="支付：" prop="pay_status">
        <el-select
          v-model="filterForm.pay_status"
          placeholder="全部支付状态"
          clearable
          class="w-[160px]!"
        >
          <el-option
            v-for="item in payStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发货：" prop="ship_status">
        <el-select
          v-model="filterForm.ship_status"
          placeholder="全部发货状态"
          clearable
          class="w-[160px]!"
        >
          <el-option
            v-for="item in shipStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="售后：" prop="refund_status">
        <el-select
          v-model="filterForm.refund_status"
          placeholder="全部售后状态"
          clearable
          class="w-[160px]!"
        >
          <el-option
            v-for="item in refundStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="handleSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="handleResetFilters">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar
      title="订单列表"
      :columns="columns"
      :tableRef="tableRef"
      @refresh="handleSearch"
      @fullscreen="tableRef.value?.setAdaptive?.()"
    >
      <template #default="{ size, dynamicColumns }">
        <PureTable
          ref="tableRef"
          v-loading="loading"
          row-key="id"
          :columns="dynamicColumns"
          :data="tableData"
          :size="size"
          :pagination="pagination"
          adaptive
          :adaptiveConfig="{ offsetBottom: 48 }"
          @page-current-change="handlePageChange"
          @page-size-change="handleSizeChange"
        >
          <template #buyer="{ row }">
            <div class="info-block">
              <div>
                <span class="info-block__label">买家ID：</span>
                <span>{{ row.buyer_user_id }}</span>
              </div>
              <div>
                <span class="info-block__label">组织：</span>
                <span>{{ row.buyer_org_id || "-" }}</span>
              </div>
              <div v-if="row.assist_user_id">
                <span class="info-block__label">运营：</span>
                <span>{{ row.assist_user_id }}</span>
              </div>
              <div class="info-block__minor">
                下单时间：{{ row.create_time || "-" }}
              </div>
            </div>
          </template>

          <template #seller="{ row }">
            <div class="info-block">
              <div>
                <span class="info-block__label">卖家组织：</span>
                <span>{{ row.seller_org_id }}</span>
              </div>
              <div>
                <span class="info-block__label">卖家账号：</span>
                <span>{{ row.seller_user_id || "-" }}</span>
              </div>
              <div v-if="row.region_id">
                <span class="info-block__label">区域：</span>
                <span>{{ row.region_id }}</span>
              </div>
              <div class="info-block__minor">
                来源：{{ row.source_channel || "-" }}
              </div>
            </div>
          </template>

          <template #amount="{ row }">
            <div class="info-block">
              <div>
                <span class="info-block__label">应付：</span>
                <span>¥{{ formatCurrency(row.buyer_payable_amount) }}</span>
              </div>
              <div>
                <span class="info-block__label">实付：</span>
                <span>¥{{ formatCurrency(row.buyer_paid_amount) }}</span>
              </div>
              <div>
                <span class="info-block__label">平台佣金：</span>
                <span>
                  ¥{{ formatCurrency(row.platform_commission_amount) }}
                </span>
              </div>
              <div class="info-block__minor">
                运费：¥{{ formatCurrency(row.shipping_fee) }}，优惠：¥{{
                  formatCurrency(row.discount_amount)
                }}
              </div>
            </div>
          </template>

          <template #status="{ row }">
            <div class="status-block">
              <el-tag
                size="small"
                effect="plain"
                :type="formatStatusTag(row.status)"
              >
                {{ row.status_label || "-" }}
              </el-tag>
              <el-tag
                size="small"
                effect="plain"
                :type="row.pay_status === 1 ? 'success' : 'warning'"
              >
                支付：{{ row.pay_status === 1 ? "已支付" : "待支付" }}
              </el-tag>
              <el-tag
                size="small"
                effect="plain"
                :type="row.ship_status === 1 ? 'success' : 'info'"
              >
                发货：{{
                  row.ship_status === 0
                    ? "待发货"
                    : row.ship_status === 1
                      ? "已发货"
                      : row.ship_status === 2
                        ? "部分发货"
                        : row.ship_status === 3
                          ? "已签收"
                          : "未知"
                }}
              </el-tag>
              <el-tag
                size="small"
                effect="plain"
                :type="
                  row.refund_status === 0
                    ? 'info'
                    : row.refund_status === 2
                      ? 'success'
                      : 'warning'
                "
              >
                售后：{{
                  row.refund_status === 0
                    ? "无售后"
                    : row.refund_status === 1
                      ? "处理中"
                      : row.refund_status === 2
                        ? "已完成"
                        : "未知"
                }}
              </el-tag>
            </div>
            <div class="info-block__minor">
              支付时间：{{ row.paid_at || "-" }}；完成时间：{{
                row.finished_at || "-"
              }}
            </div>
          </template>

          <template #remark="{ row }">
            <div class="remark-block">
              <div v-if="row.buyer_remark">
                <span class="info-block__label">买家：</span>
                <el-tooltip
                  placement="top"
                  effect="light"
                  :content="row.buyer_remark"
                >
                  <span class="remark-text">{{ row.buyer_remark }}</span>
                </el-tooltip>
              </div>
              <div v-if="row.seller_remark">
                <span class="info-block__label">卖家：</span>
                <el-tooltip
                  placement="top"
                  effect="light"
                  :content="row.seller_remark"
                >
                  <span class="remark-text">{{ row.seller_remark }}</span>
                </el-tooltip>
              </div>
              <div v-if="row.internal_remark">
                <span class="info-block__label">内部：</span>
                <el-tooltip
                  placement="top"
                  effect="light"
                  :content="row.internal_remark"
                >
                  <span class="remark-text">{{ row.internal_remark }}</span>
                </el-tooltip>
              </div>
              <div
                v-if="row.audit_remark"
                class="info-block__minor audit-remark"
              >
                审核：{{ row.audit_remark }}
              </div>
            </div>
          </template>
        </PureTable>
      </template>
    </PureTableBar>
  </div>
</template>

<style scoped>
.system-order-page {
  padding: 12px 12px 20px;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 12px;
}

.info-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.5;
}

.info-block__label {
  color: var(--el-text-color-secondary);
  margin-right: 4px;
}

.info-block__minor {
  font-size: 12px;
  color: var(--el-text-color-placeholder);
}

.status-block {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.remark-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.remark-text {
  max-width: 280px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.audit-remark {
  padding-top: 2px;
}
</style>
